<template>
  <transition name="upoverlay" appear>
    <div class="up-overlay" v-show="show" @click="changeShow">
      <div class="up-overlay-content">
        <slot />
      </div>
    </div>
  </transition>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  zIndex: {
    type: Number,
    default: 1
  },
  className: {
    type: String,
    default: 'up-overlay'
  },
  lockScroll: {
    type: Boolean,
    default: false
  },
  isClick: {
    type: Boolean,
    default: true
  }
})
const emit = defineEmits(['update:show']) // 触发自定义事件，更新父组件中的show
const changeShow = () => {
  // if (!props.isClick) return
  emit('update:show', false)
}
</script>

<style>
@import url(./index.css);
</style>
